@use '@angular/material' as mat;
@mixin bg-calendar($color) {
  background-color: rgba($color, 0.2);
  border-left: 3px solid $color;
  border-top-color: rgba($color, 0.2);
  border-right-color: rgba($color, 0.2);
  border-bottom-color: rgba($color, 0.2);
  color: $color;
  .fc-event-main {
    color: $color;
  }
}
@mixin calendar-color($theme) {
  $config: mat.m2-get-color-config($theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  $text-primary: mat.m2-get-color-from-palette($primary);
  .full-calendar {
    background-color: mat.m2-get-color-from-palette($primary, 0.1);
    .main {
      background-color: mat.m2-get-color-from-palette($background, card);
    }
  }

  // widget
  .calendar {
    .fc-theme-standard .fc-scrollgrid {
      border-color: mat.m2-get-color-from-palette($foreground, divider);
    }
    .fc-theme-standard td,
    .fc-scrollgrid th {
      border-color: mat.m2-get-color-from-palette($foreground, divider, 0.1);
    }
    .fc {
      .fc-header-toolbar {
        .fc-toolbar-chunk {
          &:last-child {
            background-color: mat.m2-get-color-from-palette($primary, 0.2);
            border-radius: 4px;
            transform: scale(1.08);
            button {
              transform: scale(0.8);
            }
          }
        }
      }
      .fc-daygrid-day-top {
        a {
          color: mat.m2-get-color-from-palette($foreground, text, 0.75);
        }
      }
      .fc-button-primary {
        background-color: mat.m2-get-color-from-palette($primary, 0.2);
        border: 0;
        color: mat.m2-get-color-from-palette($primary);
        box-shadow: none !important;
        &:disabled {
          background-color: mat.m2-get-color-from-palette($primary, 0.2);
          border-color: mat.m2-get-color-from-palette($primary, 0.2);
          color: mat.m2-get-color-from-palette($primary, 0.5);
        }
        &:hover,
        &:active,
        &:focus {
          background-color: mat.m2-get-color-from-palette($primary);
          border-color: mat.m2-get-color-from-palette($primary);
          color: mat.m2-get-color-from-palette($primary, default-contrast);
          opacity: 0.85;
        }
        &:not(:disabled).fc-button-active,
        &:not(:disabled):active,
        &:not(:disabled).fc-button-active:focus,
        &:not(:disabled):active:focus {
          background-color: mat.m2-get-color-from-palette(
            $primary,
            default-contrast
          );
          color: mat.m2-get-color-from-palette($primary);
        }
      }
      .fc-daygrid-day {
        &.fc-day-today {
          background-color: mat.m2-get-color-from-palette($primary, 0.1);
        }
      }
      .fc-h-event .fc-event-main {
        color: mat.m2-get-color-from-palette($primary, default-contrast);
      }
      // default color
      .fc-h-event {
        background-color: mat.m2-get-color-from-palette($primary);
        border-color: mat.m2-get-color-from-palette($primary);
      }
      .bg-primary {
        @include bg-calendar(mat.m2-get-color-from-palette($primary));
      }
      .bg-accent {
        @include bg-calendar(mat.m2-get-color-from-palette($accent));
      }
      .bg-warn {
        @include bg-calendar(mat.m2-get-color-from-palette($warn));
      }

      // theme color from material theme config
      .bg-pink {
        @include bg-calendar(#c2185b);
      }
      .bg-orange {
        @include bg-calendar(#e65100);
      }
      .bg-yellow {
        @include bg-calendar(#f57f17);
      }
      .bg-red {
        @include bg-calendar(#d32f2f);
      }
      .bg-purple {
        @include bg-calendar(#512da8);
      }
      .bg-indigo {
        @include bg-calendar(#303f9f);
      }
      .bg-blue {
        @include bg-calendar(#1976d2);
      }
      .bg-cyan {
        @include bg-calendar(#006064);
      }
      .bg-teal {
        @include bg-calendar(#004d40);
      }
      .bg-green {
        @include bg-calendar(#1b5e20);
      }
      .bg-light-green {
        @include bg-calendar(#4caf50);
      }
      .bg-brown {
        @include bg-calendar(#5d4037);
      }
      .bg-grey {
        @include bg-calendar(#9e9e9e);
      }
    }
  }
}
